<template>
  <div class="demo-conbogrid">
    <div> 选中当前行的所有数据: {{ state.currentRow }} </div>

    <v-combogrid
      :fields="['id', 'name']"
      :data="state.tableData"
      @rowClick="rowClick"
      :columns="[
        { prop: 'name', label: '名称' },
        { prop: 'id', label: '值' },
        { prop: 'phone', label: '值' },
      ]"
    />
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    tableData: new Array(30).fill(30).map((it, index) => {
      return { id: `id${index}`, name: `name${index}`, phone: `1358${index}` }
    }),
    currentRow: null,
  })

  const rowClick = (row) => {
    state.currentRow = row
  }
</script>

<style lang="scss" scoped>
  .demo-conbogrid {
    :deep(.el-input) {
      width: 350px;
    }

    div {
      padding: 4px 0;
    }
  }
</style>
